<template>
    <div class="main">
        <nav>
            <div 
                v-for="item of anchorData"
                @click="getCatelistData(item.id)"
            >
                <img :src="item.pic56x56Url">
                <span>{{item.name}}</span>
            </div>
        </nav>
        <article>
            <header>优秀新电台</header>
            <main v-show="excellentAnchor">
                <div 
                    v-for="item of excellentAnchor"
                    @click="getPlaylist(item.id)"
                >
                    <img :src="item.picUrl" alt="">
                    <span>{{item.name}}</span><span>{{item.rcmdtext}}</span>
                </div>
            </main > 
            <Loading v-show="!excellentAnchor"></Loading>
        </article>
    </div>
    <UserFooter></UserFooter>
</template>

<script setup>
    import { ref, getCurrentInstance, onMounted } from 'vue';
    import { useRouter } from 'vue-router'
    const axios = getCurrentInstance().proxy.$http;
    const router = useRouter();


    let anchorData = ref();
    onMounted(async () => {
        let { data } = await axios.get('/dj/catelist');
        if(data.code !== 200) return alert('数据获取失败')
        anchorData.value = data.categories;
        getCatelistData(anchorData.value[0].id);
    })

    const excellentAnchor = ref();
    const getCatelistData = async(id) => {
        excellentAnchor.value = null;
        let { data } = await axios.get(`/dj/recommend/type?type=${id}`);
        if(data.code !== 200) return alert('获取数据失败');
        excellentAnchor.value = data.djRadios;
        console.log(excellentAnchor.value)
    }



    const getPlaylist = async (id) => {
        router.push({name: 'playlist', query: {id}})
    }


    axios.get('/dj/hot')
    .then(value => {
        console.log(value.data);
    })


</script>

<style lang="less" scoped>
    nav{
        height: 200px;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(9, 1fr);
        gap: 50px 30px;
        div{
            display: grid;
            grid-template-rows: 1fr 25px;
            place-items: center;
            user-select: none;
            cursor: pointer;
            img{
                width: 50px;
                height: 50px;
                z-index: -1;
            }
            span{
                text-align: center;
                color: #555;
                font-size: 13px;
                z-index: -1;
            }
        }
    }


    article{
        margin-top: 50px;
        header{
            font-size: 25px;
            border-bottom: 3px solid #c20c0c;
            line-height: 47px;
        } 
        main{
            padding: 20px 0px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 30px;
            div{
                display: grid;
                grid-template-rows: 1fr 25px 25px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 100%;
                }
                span{
                    line-height: 25px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:first-child{
                        font-size: 13px;
                    }
                    &:last-child{
                        font-size: 10px;
                    }
                }
            }
        }
    }
</style>